<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">

<script src="../js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="../css/content.css" />
<script type="text/javascript" src="../js/fenye/jquery.js"></script>
<script type="text/javascript" src="../js/fenye/lanrenzhijia.js"></script>
<script src="../laydate/laydate.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<!--<script type="text/javascript" src="../js/common.js"></script>-->
<title>首页</title>
<script type="text/javascript">
function addTab(title, url){
	if ($('#tabs').tabs('exists', title)){
		$('#tabs').tabs('select', title);//选中并刷新
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		if(url != undefined && currTab.panel('options').title != 'Home') {
			$('#tabs').tabs('update',{
				tab:currTab,
				options:{
					content:createFrame(url)
				}
			})
		}
	} else {
		var content = createFrame(url);
		$('#tabs').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	}
	tabClose();
}
function createFrame(url) {
	var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	return s;
}
		
function tabClose() {
	/*双击关闭TAB选项卡*/
	$(".tabs-inner").dblclick(function(){
		var subtitle = $(this).children(".tabs-closable").text();
		$('#tabs').tabs('close',subtitle);
	})
	/*为选项卡绑定右键*/
	$(".tabs-inner").bind('contextmenu',function(e){
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});

		var subtitle =$(this).children(".tabs-closable").text();

		$('#mm').data("currtab",subtitle);
		$('#tabs').tabs('select',subtitle);
		return false;
	});
}		
//绑定右键菜单事件
function tabCloseEven() {
	//刷新
	$('#mm-tabupdate').click(function(){
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		if(url != undefined && currTab.panel('options').title != 'Home') {
			$('#tabs').tabs('update',{
				tab:currTab,
				options:{
					content:createFrame(url)
				}
			})
		}
	})
	//关闭当前
	$('#mm-tabclose').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('#tabs').tabs('close',currtab_title);
	})
	//全部关闭
	$('#mm-tabcloseall').click(function(){
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			if(t != 'Home') {
				$('#tabs').tabs('close',t);
			}
		});
	});
	//关闭除当前之外的TAB
	$('#mm-tabcloseother').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		var nextall = $('.tabs-selected').nextAll();		
		if(prevall.length>0){
			prevall.each(function(i,n){
				var t=$('a:eq(0) span',$(n)).text();
				if(t != 'Home') {
					$('#tabs').tabs('close',t);
				}
			});
		}
		if(nextall.length>0) {
			nextall.each(function(i,n){
				var t=$('a:eq(0) span',$(n)).text();
				if(t != 'Home') {
					$('#tabs').tabs('close',t);
				}
			});
		}
		return false;
	});
	//关闭当前右侧的TAB
	$('#mm-tabcloseright').click(function(){
		var nextall = $('.tabs-selected').nextAll();
		if(nextall.length==0){
			//msgShow('系统提示','后边没有啦~~','error');
			alert('后边没有啦~~');
			return false;
		}
		nextall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});
	//关闭当前左侧的TAB
	$('#mm-tabcloseleft').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		if(prevall.length==0){
			alert('到头了，前边没有啦~~');
			return false;
		}
		prevall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});

	//退出
	$("#mm-exit").click(function(){
		$('#mm').menu('hide');
	})
}

$(function() {
	tabCloseEven();
	$('.cs-navi-tab').click(function() {
		var $this = $(this);
		var href = $this.attr('src');
		var title = $this.text();
		addTab(title, href);
	});
});
</script>
</head>

<body>

<div class="fanhui">
        	<p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">车辆状态&nbsp;</a></p>
        </div>
        <div class="chaxun">
            <li><p>车牌号：</p><input type="text" placeholder="车牌号"></li>
            <li><p>车架号：</p><input type="text" placeholder="车架号"></li>
            <li><p>设备号：</p><input type="text" placeholder="设备号"></li>
            <li><select ><option>车队</option><option>车队</option></select></li>
            <li><input type="button" value="查询" style="background:#22abd4; color:#ffffff; text-align:center; padding:0;" class="showdiv"></li>  
        </div>
        <div class="nkbiaoth">
            <li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk" id="hao">
            </li>
            <li style="width:12%"><span>车牌号</span></li>
            <li style="width:14%"><span>车架号</span></li>
            <li style="width:14%"><span>设备号</span></li>
            <li style="width:8%"><span>公告号</span></li>
            <li style="width:8%"><span>车队</span></li>
            <li style="width:14%"><span>注册时间</span></li>
            <li style="width:14%"><span>最新数据时间</span></li>
            <li style="width:12%"><span>车辆状态</span></li>
        </div>
        <!--内容行-->
        <input type='hidden' id='current_page' />
	<input type='hidden' id='show_per_page' />
        <div class="lie" id="content">
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul> 
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="在线"></span></li>
        </ul>

        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="故障" class="guzhang"></span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:12%"><span>苏 D123456 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:14%"><span>17 位 </span></li>
            <li style="width:8%"><span>BEV360</span></li>
            <li style="width:8%"><span>1 号车队 </span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42</span></li>
            <li style="width:14%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:12%"><span><input type="button" value="离线" class="lixian"></span></li>
        </ul>
<script>
$("li>input").click(function(){
	if($(this).siblings().children().attr("src")=="../images/xuanzhong.png"){
		$(this).siblings().children().attr("src","../images/weixuanzhong.png")
		}
		else
		{
		$(this).siblings().children().attr("src","../images/xuanzhong.png")
		};
	});
$(function(){
	$('#sundashen').click(function(){
	var ss=$('#sundashen').parents('.jdxk1').siblings().find(":checkbox");
	var tt=$('#sundashen').parents('.jdxk1').siblings().find(".wenjing");
	for(var i=0; i<ss.length; i++){
		if($(this).attr('checked')){
			ss[i].checked=true;
			tt[i].src="../images/xuanzhong.png";
			}else{
				ss[i].checked=false;
				tt[i].src="../images/weixuanzhong.png";
				}
	
		}
	});
	$('#hao').click(function(){
		var k = $('#hao').parents('.nkbiaoth').siblings().find(':checkbox');
		var j = $('#hao').parents('.nkbiaoth').siblings().find('.xiaosun');
		for(var i=0; i<k.length; i++){
			if($(this).attr('checked')){
				k[i].checked=true;
				j[i].src="../images/xuanzhong.png";
				}else{
					k[i].checked=false;
					j[i].src="../images/weixuanzhong.png";
					}
			}
	});
	
})

</script>
        </div>
       <!--分页-->
<!--分页-->
<div style="background:#06212e;">
<div class="fenye">
	
	<a href="#"><img src="../images/dingdanglxz.png"></a>
    <a href="#"><img src="../images/dingdanglxyl.png"></a>
    <a href="#"><input type="text" value="1"><span>/18</span></a>
    <a href="#"><img src="../images/dingdanglxzr.png"></a>
    <a href="#"><img src="../images/dingdanglxy.png"></a>
    <span>共<strong>4</strong>条</span>
</div>
</div>
        <style>
		#page_navigation{ width:100%; margin:0 auto; height:30px; text-align:center; margin-top:30px;}
#page_navigation a{
	padding:3px 15px;
	border:1px solid gray;
	margin:2px;
	color:black;
	text-decoration:none; background:#ffffff;
}
.active_page{
	background:#1a9bc0 !important;
	color:white !important;
}
</style>
        




<!--查询弹框开始-->
	<div class="showbox">
		<div class="shang"><p>17位车架号<span>（所属单位：奇瑞汽车股份有限公司）</span></p><a class="close"><img src="../images/cha.png"></a></div>
		<div class="mainlist">
			<ul>
            	<li>车辆状态：启动</li>
                <li>模式：纯电</li>
                <li>注册时间：2016年10月26日</li>
            </ul>
            <ul>
            	<li>定位状态：有效</li>
                <li>方向：西南</li>
                <li>数据时间：2016年10月27日</li>
            </ul>
            <ul>
            	<li style="margin-right:25px;">GPS 车速：20KM/h</li>
                <li>位置：江苏省常州市钟楼区玉龙路星港路附近</li>
            </ul>
            <ul>
            	<li style="margin-right:10px;"><a href="jingtaixinxi.html">静态信息</a></li>
                <li style="margin-right:10px;"><a href="chelianggenzhong.html">车辆跟踪</a></li>
                <li style="margin-right:10px;"><a href="guijihuifang.html">轨迹回放</a></li>
                <li style="margin-right:10px;"><a href="shujuxiangqing.html">数据详情</a></li>
            </ul>
		</div>
	</div>	
  
<script type="text/javascript">
$(document).ready(function(){
	$(".showdiv").click(function(){
		var box =300;
		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$(".showbox").animate({top:th,opacity:'show',width:585,height:280,right:rw},500);
		$("#zhezhao").css({
			display:"block",height:$(document).height()
		});
		return false;
	});
	$(".showbox .close").click(function(){
		$(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$("#zhezhao").css("display","none");
	});
});
</script>
<!--查询弹框结束-->

</body>
</html>
